<template>
  <div class="content">
    <el-form
      :inline="true"
      :model="form"
      size="small"
      class="searchForm bg-gray flex flex-wp flex-a-c"
    >
      <el-form-item label="公告标题">
        <el-input v-model.trim="form.noticeTitle"></el-input>
      </el-form-item>
      <el-form-item label="状态:">
        <el-select
          v-model="form.noticeStatus"
          placeholder="请选择状态"
          filterable
          clearable
        >
          <el-option label="打开" :value="0" ></el-option>
          <el-option label="关闭" :value="1" ></el-option>
        </el-select>
      </el-form-item>
      <el-button size="small" icon="el-icon-search" @click="search()"
        >查询</el-button
      >
      <!-- 【主推品】
银幕绮旅系列-方形徽章-四款混装
银幕绮旅系列-超大徽章-四周年款
银幕绮旅系列—镭射票-四周年款
【感兴趣的老板联系负责人订货】 -->
      <el-button
        size="small"
        type="primary"
        icon="el-icon-plus"
        @click="showModal()"
        >添加</el-button
      >
    </el-form>
    <el-table
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column label="序号" align="center">
        <template slot-scope="scope">
          {{ scope.$index + 1 + (pageInfo.pageindex - 1) * pageInfo.pagesize }}
        </template>
      </el-table-column>
      <el-table-column prop="noticeTitle" label="公告标题" align="center">
      </el-table-column>
      <el-table-column
        label="公告主图"
        align="center"
      >
        <template slot-scope="scope">
          <img style="width: 100px; height: 100px;" :src="scope.row.noticePic" alt="">
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="跳转方式"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.jumpType === 1">内部链接</span>
          <span v-if="scope.row.jumpType === 2">外部链接</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="jumpUrl"
        label="跳转链接"
        align="center"
      >
      </el-table-column> -->
      <el-table-column label="是否推荐" align="center">
        <template slot-scope="scope">
          <el-switch
            @change="(noticeRecommend) => setActivityRecommend(scope.row, noticeRecommend)"
            :value="scope.row.noticeRecommend"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-switch
            @change="(noticeStatus) => setActivityStatus(scope.row, noticeStatus)"
            :value="scope.row.noticeStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="0"
            :inactive-value="1"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" width="180">
        <template slot-scope="scope">
          {{
            scope.row.addTime
              ? `${new Date(scope.row.addTime).Format("YYYY-MM-DD hh:mm:ss")}`
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="300">
        <template slot-scope="scope">
          <el-button
            size="mini"
            round
            @click="detailNotice(scope.row)"
            >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            round
            @click="delNotice(scope.row.id)"
            >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="text-c margin-t-d">
      <el-pagination
        @current-change="getDataList"
        :current-page.sync="pageInfo.pageindex"
        :page-size="pageInfo.pagesize"
        background
        layout="total,prev, pager, next, jumper"
        :total="pageInfo.total"
      ></el-pagination>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      title="添加公告"
      :visible.sync="activityVisible"
    >
      <el-form :model="activityObj" label-width="140px">
        <el-form-item label="公告标题" required>
          <el-input
            v-model.trim="activityObj.noticeTitle"
            autocomplete="off"
            maxlength="50"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="公告描述1" required>
          <el-input
            v-model.trim="noticeDesc1"
            type="textarea"
            :row="8"
            autocomplete="off"
            maxlength="10000"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="公告描述2">
          <el-input
            v-model.trim="noticeDesc2"
            type="textarea"
            :row="8"
            autocomplete="off"
            maxlength="10000"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="公告描述3">
          <el-input
            v-model.trim="noticeDesc3"
            type="textarea"
            :row="8"
            autocomplete="off"
            maxlength="10000"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="公告描述4">
          <el-input
            v-model.trim="noticeDesc4"
            type="textarea"
            :row="8"
            autocomplete="off"
            maxlength="10000"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="公告主图" required>
          <el-upload
            class="avatar-uploader"
            action="string"
            :show-file-list="false"
            :headers="{ token: $store.state.userInfo.token }"
            :http-request="UploadPic">
            <img v-if="activityObj.noticePic" :src="activityObj.noticePic" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="显示状态" required>
          <el-switch
            v-model="activityObj.noticeStatus"
            :value="activityObj.noticeStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="0"
            :inactive-value="1"
          ></el-switch>
        </el-form-item>
        <el-form-item label="是否推荐" required>
          <el-switch
            v-model="activityObj.noticeRecommend"
            :value="activityObj.noticeRecommend"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item label="公告详情图" required>
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :file-list="fileList"
            :on-remove="handleRemove"
            multiple
            :headers="{ token: $store.state.userInfo.token }"
            :http-request="UploadImage">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
              <img width="100%" v-for="item in fileList" :key="item" :src="item" class="avatar">
          </el-dialog>
          <!-- <el-upload
            class="avatar-uploader"
            action="string"
            :show-file-list="false"
            multiple
            :limit="3"
            :headers="{ token: $store.state.userInfo.token }"
            :http-request="UploadImage">
            <template v-if="activityObj.noticePicDescList.length">
              <img style="float: left;" v-for="item in activityObj.noticePicDescList" :key="item" :src="item" class="avatar">
            </template>
            <i style="float: left;" class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload> -->
        </el-form-item>

<!--         
        <el-form-item label="跳转方式">
          <el-radio v-model="activityObj.jumpType" :label="1">内部跳转</el-radio>
          <el-radio v-model="activityObj.jumpType" :label="2">外部跳转</el-radio>
        </el-form-item>
        <el-form-item label="链接地址" required>
          <el-input
            v-model.trim="activityObj.jumpUrl"
            :placeholder="activityObj.jumpType === 1 ? '请输入要链接的商品编号' : '请输入外部链接地址'"
          ></el-input>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer text-c">
        <el-button size="small" round @click="activityVisible = false"
          >取 消</el-button
        >
        <el-button size="small" round type="primary" @click="submit(1)"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addListener } from "process";

export default {
  data() {
    return {
      form: {
        noticeTitle: "",
        noticeStatus: null
      }, //活动列表筛选条件
      qdForm: {},
      tableData: [], //表格数据
      pageInfo: {
        pagesize: 10,
        pageindex: 1,
        total: 0,
      }, //页码
      fileList:[],
      enrollTableData: [], //表格数据
      enrollPageInfo: {
        pagesize: 10,
        pageindex: 1,
        total: 0,
      },
      detailVisible: false,
      areaVisible: false,
      choiceMenu: [],
      choiceId: "",
      props: {
        label: "name",
        isLeaf: "leaf",
      },
      activityVisible: false,
      noticeDesc1: '',
      noticeDesc2: '',
      noticeDesc3: '',
      noticeDesc4: '',
      activityObj: {
        id: 0,
        // jumpType: 1,
        // jumpUrl: "",
        noticeDesc: "",
        noticePic: '',
        noticePicDescList: [],
        noticeStatus: 0,
        noticeRecommend: 0,
        noticeTitle: "",
      },
      cityMapObj: {},
    };
  },
  beforeMount() {
    this.search();
  },
  methods: {
    //确定搜索条件
    search() {
      this.qdForm = { ...this.form };
      this.pageInfo = {
        pagesize: 10,
        pageindex: 1,
        total: 0,
      };
      this.getDataList();
    }, //获取表格数据
    getDataList() {
      if(this.qdForm.noticeStatus === null) {
        delete this.qdForm.noticeStatus
      }
      let params = {
        pageNum: this.pageInfo.pageindex,
        pageSize: this.pageInfo.pagesize,
        ...this.qdForm,
      };
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$ajax
        .getData("adm/notice/list", params)
        .then((data) => {
          loading.close();
          if (data.resData === undefined || data.resData === null) {
            data.resData = {
              data: [],
              count: 0,
            };
          }
          this.tableData = data.resData.data;
          this.pageInfo.total = data.resData.count;
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },
    detailNotice(item) {
      this.activityObj = {...item}
      let objList = this.activityObj.noticeDesc.split('</br>')
      this.noticeDesc1 = objList[0]
      this.noticeDesc2 = objList[1]
      this.noticeDesc3 = objList[2]
      this.noticeDesc4 = objList[3]
      let list = []
      this.activityObj.noticePicDescList.map(_=>{
        list.push({url:_})
      })
      this.fileList = [...list]
      this.activityVisible = true
    },
    //设置活动状态
    setActivityStatus(item, noticeStatus) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$ajax
        .postData("adm/notice/setStatus", {
          id: item.id,
          noticeStatus: noticeStatus,
        })
        .then((data) => {
          loading.close();
          this.$message({
            type: "success",
            message: "操作成功",
          });
          this.getDataList();
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },
    handleRemove(file,fileList){
      this.fileList = [...fileList]
      console.log(this.fileList)
    },
    //设置推荐
    setActivityRecommend(item, noticeRecommend) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$ajax
        .postData("adm/notice/setRecommend", {
          id: item.id,
          noticeRecommend: noticeRecommend,
        })
        .then((data) => {
          loading.close();
          this.$message({
            type: "success",
            message: "操作成功",
          });
          this.getDataList();
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },

    // 删除公告
    delNotice(id) {
      this.$confirm(`是否确定删除?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          this.$ajax
            .postData("adm/notice/del", {
              id,
            })
            .then((data) => {
              loading.close();
              this.$message({
                type: "success",
                message: `删除成功!`,
              });
              this.getDataList();
            })
            .catch((error) => {
              loading.close();
              this.$message({
                message: error.codeDes || error.message,
                type: "error",
              });
            });
        })
        .catch(() => {});
    },

    showModal() {
      this.activityObj = {
        id: 0,
        // jumpType: 1,
        // jumpUrl: "",
        noticeDesc: "",
        noticePic: '',
        noticePicDescList: [],
        noticeStatus: 0,
        noticeRecommend:0,
        noticeTitle: "",
      };
      this.noticeDesc1 = ''
      this.noticeDesc2 = ''
      this.noticeDesc3 = ''
      this.noticeDesc4 = ''
      this.fileList = []
      this.activityVisible = true;
    },
    submit() {
      let list = []
      this.fileList.length && this.fileList.map(_=>{
        list.push(_.url);
      })
      this.activityObj.noticeDesc = this.noticeDesc1 + '</br>'
      +this.noticeDesc2 + '</br>'
      +this.noticeDesc3 + '</br>'
      +this.noticeDesc4
      this.activityObj.noticePicDescList = list

      let params = { ...this.activityObj };
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$ajax
        .postData("adm/notice/edit", params)
        .then((data) => {
          loading.close();
          this.$message({
            type: "success",
            message: "提交成功",
          });
          this.activityVisible = false;
          this.getDataList();
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },
    UploadPic(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      const loading = this.$loading({
        lock: true,
        text: '正在上传...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      this.$ajax
        .postFormData('common/file/uploadFile', { file: param.file })
        .then((data) => {
          loading.close()
          param.onSuccess() // 上传成功的图片会显示绿色的对勾
          this.activityObj.noticePic = data.resData.url;
        
          // this.pageInfo.total = data.resData.count;
        })
        .catch((error) => {
          loading.close()
          this.$message({
            message: error.codeDes || error.message,
            type: 'error',
          })
          param.onError()
        })
    },
     UploadImage(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      const loading = this.$loading({
        lock: true,
        text: '正在上传...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      this.$ajax
        .postFormData('common/file/uploadFile', { file: param.file })
        .then((data) => {
          loading.close()
          param.onSuccess() // 上传成功的图片会显示绿色的对勾
          this.fileList.push({url:data.resData.url})
          // this.pageInfo.total = data.resData.count;
        })
        .catch((error) => {
          loading.close()
          this.$message({
            message: error.codeDes || error.message,
            type: 'error',
          })
          param.onError()
        })
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
